@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body { background-color: #e3f2fd; }

ion-icon { color: #fff; }
  
.app {
  position: relative;
  margin: 80px auto 30px;
  max-width: 320px;
  width: 100%;
}

.select-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 50px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  cursor: pointer;
}

.select-btn .title {
  font-size: 17px;
  font-weight: 400;
  color: #333;
}

.select-btn .arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  font-size: 14px;
  background-color: #6e93f7;
  transition: .2s all;
}

.select-btn.open .arrow { transform: rotate(-180deg); }

.lists {
  position: relative;
  margin-top: 15px;
  display: none;
  border-radius: 8px;
  padding: 16px;
  list-style: none;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

.select-btn.open ~ .lists {display: block;}

.lists .item {
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 50px;
  border-radius: 8px;
  transition: .3s all ease;
  cursor: pointer;
}

.lists .item:hover { background-color: #e7edfe; }

.item .text {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  letter-spacing: .4px;
}

.item .chkbox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #c0c0c0;
  transition: .2s all ease-in-out;
}

.item.checked .chkbox {
  border-color: #4070f4;
  background-color: #4070f4;
}

.chkbox ion-icon {
  font-size: 11px;
  transform: scale(0);
  transition: .2s all ease-in-out;
}

.item.checked ion-icon { transform: scale(1); }